<template>
	<div id="home">
		<header>
			<div class="left">
				SUK图床
			</div>
			<div class="right">
				<el-menu  class="el-menu-demo" mode="horizontal" >
					<el-menu-item  v-show='user.username'>
						<el-dropdown trigger="click">
							<span class="el-dropdown-link">
								<img :src="user.avator" alt="" class="avator">
								{{user.username}}<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item @click.native='$router.push("/userCenter")'>用户中心</el-dropdown-item>
								<el-dropdown-item @click.native='goOut()'>退 出</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</el-menu-item>						
					<el-menu-item v-show='!user.username' index="1" @click="showDialog('register','注 册')">		注册
					</el-menu-item>
					<el-menu-item v-show='!user.username' index="2" @click="showDialog('login','登 录')" >		登录
					</el-menu-item>
					<el-menu-item index="3" @click='$router.push("/explore")'>
						<i class='el-icon-picture'></i>探索
					</el-menu-item>
									<!-- $router.push("/uploadImg") -->
					<el-menu-item index="4" @click='goShortUrl'>
						<img src="https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/c86d049747fa9274a3d543c2a607752b8ea2c408.png" class='icon'>短网址生成
					</el-menu-item>
					<el-menu-item index="4" @click='goShortUrl'>
						<img src="https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/b26326f123cc3e74eec00477636da3405dc192bf.png" class='icon'>二维码生成
					</el-menu-item>
				</el-menu>
			</div>
		</header>
		<div class="center">
			<h2>上传与分享您的图片</h2>
			<p>	
				高速稳定的图片上传和分享服务, 全球CDN加速, 最大13 MB/张 , <br />图片外链服务，稳定不掉线，免费使用。 HTML代码,  BBCode代码, 专属的图片主页, 你要的一切，这里都有。
			</p>
			<br/>
			<p>
				关闭游客上传，不和谐上传删图&账号，且行且珍惜。
			</p>
			<p>
				<el-button @click='startUpload'>
					<i class='el-icon-upload'></i>开始上传
				</el-button>
			</p>
		</div>
		<el-drawer
			class='drawer'
			title="上传本地图片"
			:visible.sync="drawer"
			direction="btt"
			:wrapperClosable='false'
			@close='closeDrawer'
			size='50%'  
			show-close>
			<el-link @click='Remotely'>
				上传远程图片<i class="el-icon-s-promotion el-icon--right"></i> 
			</el-link>
			<br><br>
			<el-link @click='$router.push("/userCenter/myGallery")'>
				去我的图库看看<i class="el-icon-view el-icon--right"></i> 
			</el-link>
			<!-- action='http://localhost:2008/api/image/upload' -->
			<el-upload
				accept="image/*"
				class="upload-demo"
				action='https://img.oioweb.cn/api.php'
				drag
				name='file'
				:on-success='uploadImg' 
				list-type="picture"
				:data='files' 
				:file-list="imgList"
				:before-upload='beforeUpload'
				multiple>
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">
					将图片拖到此处，或
					<em>点击上传</em><br>
					（可多张同时选中上传）
				</div>
				<div slot="file" slot-scope="{file}">
					<img
					class="el-upload-list__item-thumbnail"
					:src="file.url" alt="" @click="PictureCardPreview(file)">
					<span class="el-upload-list__item-actions">
						<span class="el-upload-list__item-preview">
							{{file.name}}
						</span>
					</span>
				</div>
			</el-upload>
			<el-drawer
				title="上传远程图片"
				:append-to-body="true"
				direction="ttb"
				class='innerDrawer'
				@close='closeRemoteUpload'
				:visible.sync="innerDrawer">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>请在下方输入远程图片地址~ 多个用1个空格分开 ~ 最多一次性上传5张图片</span>
					</div>
					<div class="text item">
						<el-input
							type="textarea"
							:autosize="{ minRows: 2}"
							placeholder="请输入远程图片地址"
							v-model="innerDrawerValue">
						</el-input>
					</div>
					<el-button @click='uploadLinkImg'>提 交</el-button>
				</el-card>	    
			</el-drawer>
		</el-drawer>
		<el-dialog
			:title="title"
			:visible.sync="is_showDialog"
			@close='closeDialog'
			top='10vh'
			center :close-on-click-modal='false'>
			<component :is='comName' @changeCom='showDialog' @closeDialog="closeDialog" @isLogin='isLogin'></component>
		</el-dialog>
		<el-dialog :visible.sync="dialogVisible" width='60%' class='lookImg'>
			<img style='max-width: 100%;max-height: 79vh;' :src="dialogImageUrl" alt="">
		</el-dialog>
	</div>
</template>
<script>
	// import vueQr from 'vue-qr'
	import register from '@/components/register'
	import resetPassword from '@/components/resetPassword'
	import login from '@/components/login'
	import shortUrl from '@/components/shortUrl'
	import {api} from '@/api/public'
	export default {
		name:'home',
		data() {
			return {
				user:{
					username:sessionStorage.getItem('name'),
					avator:sessionStorage.getItem('avator')
				},
				files:{
					type:"huluxia"
					// file:'multipart',
				},
				imgList:[],
				comName:'',
				drawer:false,
				title:'',
				innerDrawerValue:'',
				is_showDialog:false,
				dialogImageUrl: '',
				dialogVisible: false,
				innerDrawer: false,	
			}
		},
		components:{
			register,login,resetPassword,shortUrl//vueQr
		},
		methods: {
			goShortUrl(){
				this.showDialog('shortUrl');
			},
			showDialog(name,title){
				this.comName=name;
				this.title=name=='register'?'注 册':name=='login'?'登 录':name=='shortUrl'?'生成短网址':'重置密码';
				this.is_showDialog=true;
			},
			closeDialog(){
				this.is_showDialog=this.comName=false;			
			},
			isLogin(data){
				this.user.username=data[0];
				this.user.avator=data[1];
			},
			startUpload(){
				let user=sessionStorage.getItem('name');
				if(user) this.drawer=true;
				else this.showDialog('login','登 录');
			},
			closeRemoteUpload(){
				this.innerDrawerValue='';
			},
			async uploadImg(res, file){
				let code=await res.code;	
				if(code==1){
					if(file){
						file.name=res.imgurl;
						file.url=res.imgurl;
					}	
					let {success}=await api('post','image','uploadImg',{userId:sessionStorage.getItem('id'),imgUrl:res.imgurl});
					if(success) this.info('图片上传成功~~~');
					else this.info('图片上传失败~~~','e');
				}
				else this.info('图片上传失败~~~','e');
			},
			beforeUpload(file){
				let type=file.type;
				if(!file.type.match('image/')){
					this.info('上传的不是图片~~~','w');
					return false;	
				}
				this.info('图片正在上传中~~~');
			},
			PictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			closeDrawer(){
				this.imgList=[];
			},
			goOut(){
				this.$confirm('你确定要退出登录吗', '提示', {
					confirmButtonText: '确定一定以及肯定',
					cancelButtonText: '再想想',
				}).then(()=>{
					sessionStorage.clear();
					this.user={};
					this.info('登出成功~~~');
				}).catch(() => {});
			},
			Remotely(){
				this.innerDrawer=true;
				// this.imgList.push({name:'123',url:'https://ws2.sinaimg.cn/large/8c534571ly1g7cofpeok6j21900u078z.jpg'})
			},
			async uploadLinkImg(){
				if(this.innerDrawerValue=='') this.info('还没输入任何东西~~~','w');
				else{
					let data=this.innerDrawerValue.split(' ');
					for(let i=0;i<data.length;i++){
						let result=await api('post','image','uploadLinkImg',{imgurl:data[i]});
						if(result.code==1){
							this.uploadImg(result);
							this.innerDrawerValue='';
						}
						else this.info('e', '图片上传失败~~~');
					}
				}	
			}
		}
	}
</script>
<style  scoped lang='stylus'>
.zIndex{
	z-index: 9999 !important;
}
#home{
	height: 100vh;
	background: url('https://ae01.alicdn.com/kf/H9ff0d7df391845419515db553c5a9858I.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
	header{
		max-width: 930px;	
		height:80px;
		margin:0 auto;
		padding-top:1em;
		color:white;
		position: relative;
		display: flex;
		align-items: center;
		.left{
			font-size: 30px;
			letter-spacing: 3px;
		}
		.right{
			position: absolute;
			right: 2em;
			ul{
				li{
					color:white;
					font-size: 1.1rem;
					background:none !important;
					font-weight: bold;
					height:58px;
					letter-spacing: 2px;
					&:hover{
						color:#ddd;
					}
					.avator{
						width: 2.6rem;
						height: 2.6rem;
						border-radius: 50%;
						margin-right:.1rem;
					}
					[class^=el-icon-] {
						font-size: 21px;
						color:#fff;
					}
					.icon{
						width:22px;
						margin-right:.4em;
					}
					.el-icon-picture{
						&:before {
							color:#fff;
						}
					}
				}
				&.el-menu{
					background:none;
					.el-menu-item{
						padding: 0 13px;
					}
					.el-menu--horizontal>.el-menu-item.is-active {
						color:white;
						border-bottom: none;
					}
				}
			}
		}
	}
	.center{
		max-width: 90%;
		box-sizing: border-box;
		position: fixed;
		left: 50%;
		top: 50%; //52% 
		transform: translate(-50%, -50%);
		color: #fff;
		text-align: center;
		>h2{
			font-size: 36px;
			font-weight: 400;
			letter-spacing: 4px;
			margin-bottom: .5em;
		}
		>p{
			font-size: 20px;
			letter-spacing: 2px;
			line-height: 1.8;
			&:last-child{
				margin-top: 2em;
				i{
					font-size: 21px;
				}
				.el-button{
					font-size: 18px;
					letter-spacing:3px;
					color:white;
					background: none;
					border-width: 2px;
					&:hover{
						color:maroon;
						background: oldlace;
					}
				}
			}
		}
	}
	>>> .el-dialog{
		max-width: 500px;
		.bottom>>>.el-button{
			width:26%;
		}
	}
	>>> .lookImg .el-dialog {
		max-width: 800px;
		margin-top: 50vh !important;
		transform: translateY(-50%);
	}
	>>> .el-dialog__wrapper {
		overflow: hidden;
	}
	.el-button--primary{
		width: 55%;
		margin-bottom: 1em;
		font-size: 1em;
	}
	>>> .el-dialog__body{
		text-align: center;
	}
	.el-dropdown{
		font-size: inherit;
		color: inherit;
		display: flex;
		.el-dropdown-menu {
			top:66px !important;
			padding: 6px 0;
		}
		.el-dropdown-menu__item {
			font-size: 15px;
			padding: 0 25px;
		}
	}
	.el-drawer__body>* {
		text-align: center;
	}
	.el-upload-list__item-thumbnail{
		cursor: pointer;
	}
	.drawer >>> .el-upload-list{
		width: 75vw;
		margin:0 auto;
	}
	.drawer >>> .el-upload-list--picture .el-upload-list__item{
		height: auto ;
	}
	.el-upload-list--picture .el-upload-list__item-thumbnail{
		width: 90px;
		height: 90px;
	}
	.el-upload-list__item>div{
		display: flex;
		align-items: center;
		font-size: 16px;
	}
	.el-upload-list__item>div>span{
		flex:2;
	}
	
	.is-underline{
		font-size: 16px;
	}
	.dialog-footer div p{
		line-height: 2em;
	}
	.upload-demo{
		margin-top: 1em;
	}
	>>>.shortUrl{
		.el-form-item__content{
			>span{
				margin-left:0;
				width:77px;
			}
		}
	}
	
}
	.drawer >>> .el-drawer__body {
		text-align: center;
	}
	.innerDrawer >>> .ttb{
		height: 52% !important;
		width: 60vw;
		margin: 0 auto;
		margin-top: 50vh;
		transform: translateY(-50%);
		overflow: auto;
	}  
	.innerDrawer >>> .ttb .el-button {
		font-size: 15px;
		padding:12px 55px;
	}
	.innerDrawer >>>.el-textarea__inner,.innerDrawer .el-card{
		margin: 0 auto;
	} 
	.innerDrawer >>>.el-textarea__inner{
		min-height: 108px !important;
		width: 94%;
		font-size: 15px;
		margin-bottom: 1em;
	}
	.innerDrawer >>>.el-card{
		width: 90%;  
		text-align: center;
		margin-bottom: 1.2em;
	}
	.drawer >>> .el-drawer__header {
		margin-bottom:10px;
	}
	.drawer >>> .btt{
		overflow:auto;
		padding-bottom: 3em;
	}
	@media (min-width:1380px){
		#home{
			>>>.el-dialog__wrapper{
				margin-top:10vh !important;
			}
		}
	}
</style>